﻿@{
    ViewData["Title"] = "栏目管理";
    Layout = "~/Areas/Manager/Views/Shared/_Layout.cshtml";
}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">栏目管理</div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-form-item">
                            <div class="layui-col-md3" style="padding-left:0">
                                <div class="input-group">
                                    <input type="text" id="keyWords" name="keyWords" placeholder="请输入栏目名称" autocomplete="off" class="layui-input">
                                    <span class="input-group-btn">
                                        <button class="layui-btn" id="search">
                                            <i class="layui-icon layui-icon-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-btn-container">
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-sm layui-bg-green" id="add"><i class="layui-icon">&#xe654;</i>增加</button>
                                <button class="layui-btn layui-btn-sm layui-bg-blue" id="open">展开/收缩</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <table class="layui-hidden" id="list" lay-filter="list"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scriptsfeet
{
    <script>
        var tableId = 'list';
        layui.config({
            base: '/layuiadmin/' //自定义模块路径
        }).extend({
            treeGrid: 'treeGrid'
        }).use(['jquery', 'treeGrid', 'layer', 'sykjwh'],
            function() {
                var $ = layui.jquery, treeGrid = layui.treeGrid, sykjwh = layui.sykjwh;
                treeGrid.render({
                    id: tableId,
                    elem: '#' + tableId,
                    url: '@Url.Action("channellist", "cms", new {area = Constant.AREAMANAGER})',
                    cellMinWidth: 100,
                    idField: 'channelId' //必須字段
                    ,
                    treeId: 'channelId' //树形id字段名称
                    ,
                    treeUpId: 'parentId' //树形父id字段名称
                    ,
                    treeShowName: 'channeName' //以树形式显示的字段
                    ,
                    heightRemove: [".dHead", 10] //不计算的高度,表格设定的是固定高度，此项不生效
                    ,
                    height: '100%',
                    isFilter: false,
                    iconOpen: false //是否显示图标【默认显示】
                    ,
                    isOpenDefault: false //节点默认是展开还是折叠【默认展开】
                    ,
                    loading: true,
                    method: 'get',
                    cols: [
                        [
                            { type: 'numbers' }, { field: 'channeName', width: 300, title: '栏目名称', sort: true },
                            { field: 'moduleId', width: 100, title: '内容模式', sort: true },
                            { field: 'status', title: '状态', sort: true }, {
                                width: 180,
                                title: '操作',
                                align: 'center' /*toolbar: '#barDemo'*/,
                                templet: function(d) {
                                    var html = '';
                                    var addBtn =
                                        '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加子项</a>';
                                    var delBtn =
                                        '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                                    var delEdit =
                                        '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>';
                                    return addBtn + delBtn + delEdit;
                                }
                            }
                        ]
                    ],
                    isPage: false,
                    parseData: function(res) { //数据加载后回调
                        return res;
                    },
                    onDblClickRow: function(index, o) {
                    }
                });

                //监听表格
                treeGrid.on('tool(' + tableId + ')',
                    function (obj) {
                        var data = obj.data;
                        if (obj.event === 'del') { //删除行
                            layer.confirm("确认要删除吗？", { title: "删除确认" }, function(index) {
                                $.ajax({
                                    url: "@Url.Action("channeldel", "cms", new {area = Constant.AREAMANAGER})/" + data.channelId,
                                    data: {},
                                    type: "post",
                                    dataType: "json",
                                    success: function (res) {
                                        if (res.success === true) {
                                            //成功的提示
                                            layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                                //重新加载数据
                                                var loading = layer.msg('数据请求中', { icon: 16, shade: 0.01, time: 0 });
                                                window.location.href = window.location.href;
                                            });
                                        }
                                        else {
                                            layer.alert(res.data, { icon: 5 });
                                        }
                                    }
                                });
                            });
                        } else if (obj.event === "add") { //添加行
                            sykjwh.open('添加参数', '@Url.Action("channeladd", "cms", new {area = Constant.AREAMANAGER})/'+ data.channelId,600,700);
                        } else if (obj.event === "edit") { //修改行
                            sykjwh.open('编辑参数', '@Url.Action("channeledit", "cms", new {area = Constant.AREAMANAGER})/' + data.channelId, 600, 700);
                        }
                    });

                //添加
                $("#add").click(function() {
                    sykjwh.open('添加参数', '@Url.Action("channeladd", "cms", new {area = Constant.AREAMANAGER})',600,700);
                });

                //展开/折叠
                $("#open").click(function() {
                    var treedata = treeGrid.getDataTreeList(tableId);
                    treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
                });

                //搜索
                $("#search").click(function() {
                    treeGrid.query(tableId,
                        {
                            where: {
                                keyWords: $.trim($("#keyWords").val())
                            }
                        });
                });
            });
    </script>
}